<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import ToDo from './components/todo'

import DialogDemo1 from './components/DialogDemo1.vue'
import DrawerDemo from './components/DrawerDemo.vue'
import { useDynamicDialog } from './components/dynamic-dialog'
import { ElMessageBox, ElNotification } from 'element-plus'
import { defineAsyncComponent } from 'vue'

const DialogDemoAsync = defineAsyncComponent(() => import('./components/DialogDemo1.vue'))

const { open } = useDynamicDialog()

const onOpenDrawerClick = () => {
  open(DrawerDemo, {
    onOk: () => {
      ElNotification.success({
        title: '抽屉成功',
        message: '抽屉成功'
      })
    },
    onCancel: () => {
      ElNotification.error({
        title: '抽屉取消',
        message: '抽屉取消'
      })
    }
  })
}

const onClick = () => {
  const instance = open(DialogDemoAsync, {
    name: '入参City不City',
    onOk: (data: string) => {
      ElMessageBox({
        title: '成功',
        message: `成功: ${data}`
      })
    },
    onCancel: () => {
      ElNotification.error({
        title: '取消',
        message: '取消'
      })
    }
  })
  console.log(instance)
  /*
  setTimeout(() => {
    instance.close()
  }, 5000)
  */
}
</script>

<template>
  <main>
    <el-button @click="onClick">弹出框</el-button>
    <el-button @click="onOpenDrawerClick">抽屉</el-button>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
